<template>
  <div class="ad-component" :class="positionClass">
    <!-- 广告内容，实际项目中可能从后端获取 -->
    <div v-if="adContent" class="ad-content" ref="adElement">
      <a :href="adContent.link" target="_blank">
        <img :src="adContent.imageUrl" :alt="adContent.title" class="ad-image" />
        <div class="ad-info">
          <h3 class="ad-title">{{ adContent.title }}</h3>
          <p class="ad-desc">{{ adContent.description }}</p>
        </div>
      </a>
    </div>
    <!-- 加载中的占位符 -->
    <div v-else class="ad-placeholder">广告加载中...</div>
  </div>
</template>

<script>
import axios from '@/utils/request';

export default {
  name: 'AdCard',
  props: {
    // 广告位置编码：1:文章页顶部，2:文章页底部，3:信息流
    positionCode: {
      type: Number,
      required: true,
      validator: value => [1, 2, 3].includes(value)
    },
    // 关联的内容ID，用于记录展示位置
    contentId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      adContent: null,
      observer: null,
      isReported: false // 防止重复记录展示
    };
  },
  mounted() {
    // 加载广告内容（实际项目中从后端API获取）
    this.loadAdContent();

    // 初始化Intersection Observer检测广告可见性
    this.initIntersectionObserver();
  },
  beforeDestroy() {
    // 销毁时取消观察
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    // 加载广告内容
    loadAdContent() {
      // 模拟从API获取广告数据
      // 实际项目中应根据positionCode获取不同位置的广告
      this.adContent = {
        id: 1,
        title: '限时优惠活动',
        description: '全场商品8折起，立即抢购！',
        imageUrl: 'https://picsum.photos/600/300?random=1',
        link: 'https://www.example.com/promotion'
      };
    },

    // 初始化Intersection Observer
    initIntersectionObserver() {
      if (!this.$refs.adElement) return;

      this.observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting && !this.isReported) {
            // 广告进入视口，记录展示
            this.reportAdImpression();
            this.isReported = true;
          }
        });
      }, {
        threshold: 0.1 // 至少10%可见即记录展示
      });

      this.observer.observe(this.$refs.adElement);
    },

    // 记录广告展示
    async reportAdImpression() {
      if (!this.adContent) return;

      try {
        // 获取用户ID（假设已登录，实际项目中应从认证信息获取）
        const userId = this.getUserId();

        // 构造展示数据
        const impressionData = {
          creativeId: this.adContent.id,
          userId: userId,
          contentId: this.contentId,
          positionCode: this.positionCode,
          ipAddress: await this.getIpAddress(),
          deviceInfo: this.getDeviceInfo(),
          location: await this.getLocation()
        };

        // 发送展示记录到后端
        await axios.post('/api/ad/impressions', impressionData);
        console.log('广告展示记录成功', impressionData);
      } catch (error) {
        console.error('广告展示记录失败', error);
      }
    },

    // 获取用户ID（示例，实际应从登录状态获取）
    getUserId() {
      // 假设从localStorage获取
      const user = JSON.parse(localStorage.getItem('user'));
      return user ? user.userId : null;
    },

    // 获取IP地址（实际需要调用IP查询API）
    getIpAddress() {
      // 示例返回，实际应通过API获取
      return '192.168.1.1';
    },

    // 获取设备信息
    getDeviceInfo() {
      return {
        os: navigator.platform,
        browser: navigator.userAgent,
        deviceType: /mobile|tablet|touch/i.test(navigator.userAgent) ? 'mobile' : 'desktop'
      };
    },

    // 获取地理位置（实际需要调用地理位置API）
    getLocation() {
      // 示例返回，实际应通过API获取
      return {
        city: 'Beijing',
        region: 'Beijing',
        country: 'China'
      };
    }
  },
  computed: {
    positionClass() {
      const classes = {
        'ad-top': this.positionCode === 1,
        'ad-bottom': this.positionCode === 2,
        'ad-feed': this.positionCode === 3
      };
      return Object.keys(classes).filter(cls => classes[cls]).join(' ');
    }
  }
};
</script>

<style scoped>
.ad-component {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  text-align: center;
}

.ad-top {
  margin-bottom: 20px;
}

.ad-bottom {
  margin-top: 20px;
}

.ad-feed {
  margin: 15px 0;
}

.ad-content {
  cursor: pointer;
}

.ad-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

.ad-info {
  text-align: left;
}

.ad-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.ad-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.ad-placeholder {
  padding: 20px;
  color: #999;
  border: 1px dashed #ddd;
  border-radius: 4px;
}
</style>
